<template lang="html">
  <div class="home-container">
    <div class="height-space-10"></div>
    <el-row class="">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card shadow="always">
            今日访客
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            今日订单数
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            今日收益
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            订单数和昨日相比
          </el-card>
        </el-col>
      </el-row>
    </el-row>
    <div class="height-space-20"></div>
    <el-row class="tab-style">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单数排行" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="总收益排行" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </el-row>
    <div class="height-space-20"></div>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>最近一个月访问量，下单量，收益折线图</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
     <div class="height-space-20"></div>
    <el-row>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>智能分析原因</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div v-for="o in 4" :key="o" class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  mounted () {
    var user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.sysUserName = user.username || ''
    }
  }
}
</script>
<style scoped lang="scss">
  .tab-style{
    background: #fff;
    padding: 10px;
    border-radius: 5px;

  }
</style>
